<template>
  <div class="container">
    <a-form style="margin-bottom: 10px">
      <a-row :gutter="20">
        <a-col :span="6">
          <a-form-item label="订单号">
            <a-input allow-clear v-model="state.sd.csocode" placeholder="订单号" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="存货名称">
            <a-input allow-clear v-model="state.sd.cinvname" placeholder="存货名称" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="客户名称">
            <a-input allow-clear v-model="state.sd.ccusname" placeholder="客户名称" />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="searchData">
            <template #icon><icon-search /></template>查询
          </a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.jinDuList">
      <template #columns>
        <a-table-column title="订单号" data-index="cSoCode" width="200"></a-table-column>
        <a-table-column title="客户名称" data-index="cCusName" width="300"></a-table-column>
        <a-table-column title="存货名称" data-index="cInvName" width="200"></a-table-column>
        <a-table-column title="订单数量" width="200">
          <template #cell="{ record }">
            <span style="color: #f56c6c">{{record.isll}}{{record.cComUnitName}}</span>
          </template>
        </a-table-column>
        <a-table-column title="下料出库">
          <template #cell="{ record }">
            <span>{{record.xwhMapStr}}</span>
          </template>
        </a-table-column>
        <a-table-column title="锻压完成">
          <template #cell="{ record }">
            <span>{{record.dwhMapStr}}</span>
          </template>
        </a-table-column>
        <a-table-column title="机加完成">
          <template #cell="{ record }">
            <span>{{record.jwhMapStr}}</span>
          </template>
        </a-table-column>
        <a-table-column title="成品完成">
          <template #cell="{ record }">
            <span>{{record.whMapStr}}</span>
          </template>
        </a-table-column>
        <a-table-column title="发货完成">
          <template #cell="{ record }">
            <span>{{record.fwhMapStr}}</span>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted} from "vue";

const state = reactive({
  sd: {
    csocode: '',
    ccusname: '',
    cinvname: ''
  },
  jinDuList: [],
})
const searchData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    loadData();
  }else{
    Message.error("请输入查询条件")
  }
}
const loadData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    axios.post('/sal/listsomain', state.sd).then(res => {
      const { data } = res
      state.jinDuList = data
    })
  }else{
    state.jinDuList = [];
  }
}
onMounted(()=>{

})
</script>

<style scoped lang="less">

</style>
